/*
 * @Author: Yejing
 * @Date: 2023-05-29 17:18:57
 * @LastEditors: Yejing
 * @LastEditTime: 2023-05-29 17:19:01
 * @Description: 气泡
 */


<template>
	<view class="more-block">
		<u-icon name="more-dot-fill" :color="iconColor" size="55" @click="moreClick"></u-icon>
		<view class="bubble" v-show="show" :style="{'background':background,'color':color}">
			<view class="line">
				<view v-for="(item,index) in data" :key="index" @click="bubbleLineClick(item,index)">
					<u-icon :name="item.icon"></u-icon>
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		props: {
			//数据
			data: {
				type: Array,
				default: []
			},
			//背景颜色
			background: {
				type: String,
				default: '#323755'
			},
			//图标颜色
			iconColor: {
				type: String,
				default: '#fff'
			},
			//字体颜色
			color: {
				type: String,
				default: '#fff'
			},
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			//更多
			moreClick() {
				this.show = !this.show
			},
			bubbleLineClick(item, index) {
				this.$emit('bubbleLineClick', item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more-block {
		position: relative;

		.bubble {
			position: absolute;
			width: 222rpx;
			font-size: 24rpx;
			right: -14rpx;
			padding: 28rpx;
			border-radius: 30rpx;
			margin-top: 15rpx;
			z-index: 9999;
			.line {
				uni-text {
					display: block;
					margin-bottom: 38rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&:nth-child(4) {
						margin-bottom: 0;
					}
				}

				.u-icon {
					margin-right: 20rpx;
				}
			}

			&::after {
				position: absolute;
				top: -16rpx;
				right: 54rpx;
				content: '';
				border: 8px solid transparent;
				border-top: none;
				border-bottom-color: #323755;

			}

		}
	}
</style>